﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ComponentArtTest.aspx.cs" Inherits="JQueryWidget.WidgetFrame.ComponentArtTest" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<%@ Register Assembly="ComponentArt.Web.UI" Namespace="ComponentArt.Web.UI" TagPrefix="ComponentArt" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
    .widgetStore
    {
    }
    .column 
    {
        margin:0px 0px 0px 0px;
        width:33%;
        display:block;
        float:left;
        position:relative; 
        height:800px;
    }
    .modbox
    {
        margin:0px 0px 0px 0px;
    }
    .widget
    { 
        border:1px solid gray;
        margin-top:10px;
    }
    .widget_header
    {
        background-color:lightblue;
    }
    .widget_body
    {
    }
    .widget_footer
    {
    }
    
    .draggable
    {
    }
    .droppable
    {
    }
    .widgetholder
    {
        border:2px dashed gray;
        display:none;
        position:relative;
        margin-top:10px;
    }
    
    .widgetholder1
    {
        border:2px dashed gray; 
        position:relative;
        margin-top:10px;
        height:40px;
    }
    .toolbox
    { 
        float:right;
        border:1px solid gray; 
        position:right top;
        z-index:100;
    }
    .toolbox_title
    {
        background-color:lightblue;
    }
    .toolbox_body
    {
        display:none;
    }
    .additem
    {
    }  
    </style>
    <script src="Scripts/MicrosoftAjax.js" type="text/javascript"></script>
    <script type="text/javascript">
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div class="widgetStore">
            <div id="column1" class="column">
            </div>
            <div id="column2" class="column">
                          
            </div>
            <div id="column3" class="column">
         
            </div>
        </div> 
    </div>
    
    <ComponentArt:Snap ID="Snap1" runat="server"  
        DockingContainers="column1,column2,column3"
        CurrentDockingContainer="column1"
        CurrentDockingIndex="0"
        CollapseDuration ="300"
        ExpandDuration="300"
        DraggingStyle="DashedOutline"
        DockingStyle="TransparentRectangle"
        MustBeDocked="true"
        IsCollapsed="false" >
        <Header>
            <div style="height:20px; background-color:lightBlue;" onmousedown="Snap1.startDragging(event);">Dev Tools</div>
        </Header>
        <Content>
            <div>This is  a snap;</div>
        </Content>
    </ComponentArt:Snap>  
    </form>
</body>
</html>
